<template>
  <view class="order-card">
    <view class="order-header">
      <text class="order-name">{{ getOrderTitle }}</text>
      <text class="order-status">{{ getStatusText }}</text>
    </view>
    
    <!-- 添加体检人/接种人信息 -->
    <view class="order-person">
      {{ getPersonLabel }}: {{ getPersonName }}
    </view>
    
    <view class="order-info">
      <text>{{ getOrderLocation }}</text>
      <text>时间: {{ order.time }}</text>
    </view>
    
    <!-- 添加疫苗信息 -->
    <view class="order-vaccine" v-if="order.vaccine">
      疫苗名称: {{ order.vaccine }}
    </view>
    
    <view class="order-vaccine-type" v-if="order.vaccineType">
      疫苗类型: {{ order.vaccineType }}
    </view>
    
    <!-- 添加预约日期 -->
    <view class="order-date" v-if="order.date">
      预约日期: {{ order.date }}
    </view>
    
    <!-- 添加创建时间 -->
    <view class="order-create-time" v-if="order.createdAt">
      创建时间: {{ formatDate(order.createdAt) }}
    </view>
    
    <!-- 添加订单号 -->
    <view class="order-number" v-if="order.orderNo">
      订单号: {{ order.orderNo }}
    </view>
    
    <view class="order-footer" v-if="showCancelButton || showCompleteButton">
      <text class="order-price" v-if="order.price">¥{{ order.price }}</text>
      <view class="action-buttons">
        <button class="cancel-btn" @click="handleCancel" v-if="showCancelButton">取消预约</button>
        <button class="complete-btn" @click="handleComplete" v-if="showCompleteButton">确认完成</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    order: {
      type: Object,
      required: true
    },
    type: {
      type: Number,
      required: true,
      validator: value => [0, 1, 2, 3].includes(value)
    }
  },
  computed: {
    getOrderTitle() {
      // 优先使用疫苗名称作为标题
      if (this.order.vaccine) {
        return this.order.vaccine;
      }
      
      switch(this.type) {
        case 0: return this.order.title || '疫苗预约';      // 挂号预约
        case 1: return this.order.package || '疫苗预约';    // 体检预约
        case 2: return this.order.title || '疫苗预约';      // HPV预约
        case 3: return '新冠疫苗预约';        // 新冠预约
        default: return '疫苗预约';
      }
    },
    getStatusText() {
      // 根据数据库字段调整状态映射：1-预约成功，2-已取消，3-已完成
      const statusMap = {1: '预约成功', 2: '已取消', 3: '已完成'};
      return statusMap[this.order.status] || '未知状态';
    },
    getOrderLocation() {
      // 使用clinic字段作为医院信息
      switch(this.type) {
        case 0: return `医院: ${this.order.clinic || '暂无医院信息'}`;
        case 1: return `地点: ${this.order.location || this.order.clinic || '暂无地点信息'}`;
        case 2: return `地点: ${this.order.location || this.order.clinic || '暂无地点信息'}`;
        case 3: return `地点: ${this.order.location || this.order.clinic || '暂无地点信息'}`;
        default: return '';
      }
    },
    // 获取人员标签（体检人/接种人/就诊人）
    getPersonLabel() {
      switch(this.type) {
        case 0: return '就诊人';
        case 1: return '体检人';
        case 2: return '接种人';
        case 3: return '接种人';
        default: return '人员';
      }
    },
    // 从本地获取登录用户名作为就诊人信息
    getPersonName() {
      // 尝试从订单数据中获取，如果没有则从本地存储获取
      if (this.order.patient) return this.order.patient;
      if (this.order.person) return this.order.person;
      
      // 从本地存储获取登录用户名
      const userInfo = uni.getStorageSync('userInfo');
      if (userInfo && typeof userInfo === 'object') {
        return userInfo.username || userInfo.name || userInfo.nickName || '用户';
      } else if (typeof userInfo === 'string') {
        try {
          const parsedUserInfo = JSON.parse(userInfo);
          return parsedUserInfo.username || parsedUserInfo.name || parsedUserInfo.nickName || '用户';
        } catch (e) {
          return userInfo;
        }
      }
      
      return '默认用户';
    },
    // 修复取消按钮显示逻辑：状态为预约成功（1）时显示
    showCancelButton() {
      return this.order.status === 1; // 状态为"预约成功"时显示取消按钮
    },
    // 确认完成预约按钮显示逻辑：状态为预约成功（1）时显示
    showCompleteButton() {
      return this.order.status === 1; // 状态为"预约成功"时显示完成按钮
    }
  },
  methods: {
    handleCancel() {
      uni.showModal({
        title:'取消预约',
        content:'确认取消预约吗？',
        success:(res)=>{
          if(res.confirm){
            this.$emit('cancel', this.order.id);
          }
        }
      })
    },
    // 处理完成预约
    handleComplete() {
      uni.showModal({
        title:'完成预约',
        content:'确认将此预约标记为已完成吗？',
        success:(res)=>{
          if(res.confirm){
            this.$emit('complete', this.order.id);
          }
        }
      })
    },
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '';
      
      try {
        const date = new Date(dateString);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      } catch (e) {
        return dateString;
      }
    }
  }
};
</script>

<style scoped>
.order-card {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.order-name {
  font-size: 32rpx;
  font-weight: bold;
}

.order-status {
  font-size: 24rpx;
  color: #007AFF;
}


.order-person {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  color: #333;
}

.order-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  color: #666;
}

/* 新增字段样式 */
.order-vaccine,
.order-vaccine-type,
.order-date,
.order-count,
.order-create-time {
  font-size: 24rpx;
  margin-bottom: 10rpx;
  color: #666;
}

.order-number {
  font-size: 24rpx;
  margin-bottom: 20rpx;
  color: #999;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
  padding-top: 10rpx;
  border-top: 1px dashed #eee;
}

.order-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff5500;
}

.action-buttons {
    display: flex;
    gap: 20rpx;
  }
  
  .cancel-btn {
    font-size: 24rpx;
    color: #007AFF;
    background-color: transparent;
    border: none;
  }
  
  .complete-btn {
    font-size: 24rpx;
    color: #07c160;
    background-color: transparent;
    border: none;
  }
</style>